<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useExpressionStore } from '@/stores/expressionStore'

const expressionStore = useExpressionStore()
const { expressions } = storeToRefs(expressionStore)

const rows = computed(() =>
  expressions.value.map((entry, index) => ({
    idx: index + 1,
    id: entry.id,
    expression: entry.expression.trim() || '（未填写）',
    status: entry.status,
    visible: entry.visible,
    color: entry.color,
    segmentCount: entry.segmentCount,
    sampleValue:
      entry.sampleValue === null || Number.isNaN(entry.sampleValue)
        ? '—'
        : entry.sampleValue.toFixed(3),
    lastDuration:
      entry.lastDurationMs === null ? '—' : `${entry.lastDurationMs.toFixed(1)} ms`,
    lastComputedAt:
      entry.lastComputedAt === null
        ? '—'
        : new Date(entry.lastComputedAt).toLocaleTimeString(undefined, {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
          }),
    cacheHitLabel: entry.cacheHit ? '命中' : '重新计算',
    validRatioLabel:
      entry.validSampleRatio === null
        ? '—'
        : entry.validSampleRatio <= 0
        ? '无定义域'
        : `${Math.round(entry.validSampleRatio * 100)}%`,
  })),
)

const hasRows = computed(() => rows.value.length > 0)

const statusLabel: Record<string, string> = {
  idle: '待计算',
  evaluating: '计算中',
  ready: '已就绪',
  error: '错误',
}
</script>

<template>
  <section class="table-wrapper">
    <header class="table-header">
      <h2 class="table-title">计算明细</h2>
      <p class="table-subtitle">
        查看每个表达式的段数、耗时、缓存命中情况与有效采样率，快速定位图线无法渲染的原因。
      </p>
    </header>

    <div v-if="!hasRows" class="table-empty">
      <p>暂无表达式数据。请先添加表达式。</p>
    </div>

    <div v-else class="table-scroll">
      <table class="contour-table">
        <thead>
          <tr>
            <th>#</th>
            <th>表达式</th>
            <th>状态</th>
            <th>段数</th>
            <th>中心值</th>
            <th>耗时</th>
            <th>缓存</th>
            <th>有效率</th>
            <th>最近计算</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id">
            <td>{{ row.idx }}</td>
            <td class="expr-cell">
              <span
                class="expr-color"
                :style="{ backgroundColor: row.color, opacity: row.visible ? 1 : 0.3 }"
                :title="row.visible ? '显示中' : '已隐藏'"
              ></span>
              <span :class="{ 'expr-muted': !row.visible }">{{ row.expression }}</span>
            </td>
            <td>
              <span :class="['status-pill', `status-pill--${row.status}`]">
                {{ statusLabel[row.status] ?? row.status }}
              </span>
            </td>
            <td>{{ row.segmentCount }}</td>
            <td>{{ row.sampleValue }}</td>
            <td>{{ row.lastDuration }}</td>
            <td>
              <span :class="['cache-pill', row.cacheHitLabel === '命中' ? 'cache-pill--hit' : 'cache-pill--miss']">
                {{ row.cacheHitLabel }}
              </span>
            </td>
            <td>{{ row.validRatioLabel }}</td>
            <td>{{ row.lastComputedAt }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>

<style scoped>
.table-wrapper {
  width: 100%;
  min-width: 0;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.9rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.table-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.table-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.table-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

.table-empty {
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.contour-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 720px;
}

.contour-table thead {
  background: rgba(51, 65, 85, 0.35);
  color: #e2e8f0;
}

.contour-table th,
.contour-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  white-space: nowrap;
}

.contour-table tbody tr:hover {
  background: rgba(51, 65, 85, 0.2);
}

.expr-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.expr-color {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  flex-shrink: 0;
}

.expr-muted {
  color: #64748b;
  font-style: italic;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
}

.status-pill--evaluating {
  background: rgba(250, 204, 21, 0.18);
  color: #facc15;
}

.status-pill--ready {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.status-pill--error {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.cache-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: 0.65rem;
  font-size: 0.72rem;
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
}

.cache-pill--hit {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.cache-pill--miss {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}
</style>
